<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        body{
            text-align: center;
        }

        table{
            margin: 0 auto;
        }

        table.gridtable {
            font-family: verdana,arial,sans-serif;
            font-size:14px;
            color:#333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }
        table.gridtable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }
        table.gridtable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <h1>用户列表</h1>
    <table id="tb-users" class="gridtable">

    </table>

    <script src="/js/jquery-1.11.3.min.js"></script>
    <script>
        $(function() {
            var token = window.localStorage.getItem("token")
            console.log(token)
            // 提交验证
            $.ajax({
                type: "GET",
                url: "/api/user/listAll",
                headers:{'Authorization':token},
                contentType: "application/json",
                success: function (result) {
                    console.log(result)
                    if(result.code==200){
                        if (result.data != null && result.data!='') {
                            // 拼接列表
                            var dataRow = '<tr><td>ID</td><td>用户名</td><td>密码</td></tr>';
                            $.each(result.data, function (i, r) {
                                dataRow += '<tr>'
                                    + '<td>'
                                    + r.id
                                    + '</td>'
                                    + '<td>'
                                    + r.username
                                    + '</td><td>'
                                    + r.password + '</td>'
                                ;

                                dataRow += '</tr>';
                            });

                            // console.log(dataRow);
                            $("#tb-users").empty();
                            $("#tb-users").append(dataRow);
                        }
                    }else{
                        alert(result);
                    }
                },
                error:function(result){
                    if(result.status==401){
                        window.location.href="login.html";
                    }
                }
            });
        });

    </script>
</body>
</html>